<template>
  <div>
    <el-container style="margin: 0; width: 100%;">
      <el-aside :style="{ width: asideWidth, minHeight: '100vh', backgroundColor: '#304156' }">
        <div class="logo-container">
          <img src="@/assets/logo1.jpg" alt="" style="height: 40px; margin-top: 10px;" />
          <transition name="el-fade-in">
            <span style="color: #fff; font-size: 20px; margin-left: 10px;" v-show="!collapse">Vue 1.0</span>
          </transition>
        </div>
        <el-menu router :default-active="$route.path" background-color="#304156" text-color="#fff" active-text-color="#409eff">
          <el-menu-item index="/">
            <i class="el-icon-house"></i>
            <span slot="title" v-show="!collapse">系统首页</span>
          </el-menu-item>
          <el-menu-item index="/element">
            <i class="el-icon-document"></i>
            <span slot="title">Element页</span>
          </el-menu-item>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/admin-info">
              <i class="el-icon-user"></i>
              <span slot="title">管理员信息</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
         <el-header style="background-color: #409eff; color: #fff;">
          <i class="el-icon-menu" @click="handleCollapse"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px;">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/user'}">用户管理</el-breadcrumb-item>
          </el-breadcrumb>
           <div style="flex: 1; text-align: right; margin-right: 20px;">
             <el-dropdown placement="bottom-end">
               <div style="display: flex;align-items: center; cursor: default;">
                 <img src="@/assets/logo1.jpg" alt="" style="height: 40px; " />
                 <span class="el-dropdown-link" style="color: #fff; margin-left: 10px;">管理员</span>
               </div>
               <el-dropdown-menu slot="dropdown" >
                 <el-dropdown-item>个人信息</el-dropdown-item>
                 <el-dropdown-item>修改密码</el-dropdown-item>
                 <el-dropdown-item @click="" >退出</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </div>
        </el-header>
        <el-main>
          <div style="padding: 10px 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);margin-bottom: 20px;">早安</div>
          <el-card style="width: 500px">
            <div slot="header" class="clearfix">
              <span>用户管理</span>
            </div>
            <div style="magin-top: 20px;">
              <div style="margin: 10px 0;"><strong>主题色</strong></div>
              <el-button type="primary">主要按钮</el-button>
              <el-button type="success">成功按钮</el-button>
              <el-button type="info">信息按钮</el-button>
              <el-button type="warning">警告按钮</el-button>
              <el-button type="danger">危险按钮</el-button>
              <el-button type="text">文字按钮</el-button>
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  // 定义组件的数据
  data() {
    return {
      collapse: false,
    };
  },
  // 计算属性
  computed: {
    // 根据折叠状态计算侧边栏宽度
    asideWidth() {
      return this.collapse ? '60px' : '200px';
    },
    // 检查当前路由是否有效
    validRoute() {
      const route = this.$router.getMatchedComponents(this.$route);
      return route.length > 0;
    }
  },
  // 组件的方法
  methods: {
    // 切换侧边栏的折叠状态
    handleCollapse() {
      this.collapse = !this.collapse;
    }
  }
};
</script>

<style scoped>
.logo-container {
  height: 60px;
  background-color: #304156;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-header {
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.el-icon-menu {
  cursor: pointer;
  margin-right: 10px;
}

.el-menu-item, .el-submenu__title {
  color: white !important;
}

.el-menu-item:hover, .el-submenu__title:hover, .el-menu-item.is-active {
  background-color: #409eff !important;
  color: white !important;
}
</style>
